<template>
    <view>
<!--        <button @click="start()">生成</button> -->
        <!-- 此处用于展示生成的图片 -->
        <image @click="handleImage" :src="poster" :style="{width: screenWidth*2+'rpx',height: newHeight*2+'rpx'}"></image>
        <!-- 生成图片 -->
        <poster ref="poster" :list="list" background-color="#FFF" :width="screenWidth*2" :height="newHeight*2"
            @on-success="posterSuccess" @on-error="posterError"></poster>

    </view>
</template>

<script>
    import Poster from '@/components/zhangyuhao-poster/Poster.vue'
	import { getBuildScope } from '@/api/common.js'
    export default {
        components: {
            Poster
        },
        data() {
            return {
                poster: '',
                list: [],
				screenWidth: 0,
				newHeight: 0,
				onInclick: {
					x: 0,
					y: 0
				}
            };
        },
		mounted() {
			const sysInfo = wx.getSystemInfoSync();
			this.screenWidth = sysInfo.screenWidth
			this.getImageSize()
			getBuildScope({buildModelId:138,uvs:[{u:0.48,v:0.4}]}).then(res => {
				
			})
		},
        methods: {
			handleImage(e){
				this.onInclick.x = e.detail.x
				this.onInclick.y = e.detail.y
				this.start()
			},
			async getImageSize() {
			  let imageInfoObj = await uni.getImageInfo({src: 'https://tu.duoduocdn.com/uploads/day_240319/65f93cf9c630f_watermark.jpg'}) 
			  // 取到图片的宽高
			  let { width,height } = imageInfoObj[1]
			  this.newHeight = height * this.screenWidth / width
			  this.start()
			},
            posterError(err) {
                console.log(err)
            },
            posterSuccess(url) {
                // 生成成功，会把临时路径在这里返回
                this.poster = url;
                console.log(url)
            },
            start() {
                // 赋值需要渲染的信息
                this.list = [{
                        type: 'image',
                        // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
                        path: 'https://tu.duoduocdn.com/uploads/day_240319/65f93cf9c630f_watermark.jpg',
                        x: 0,
                        y: 0,
                        width: this.screenWidth*2,
                        height: this.newHeight*2
                    }
                ];
                let pointList = [{x:50,y:50},{x:40,y:60},{x:50,y:60},{x:60,y:60},{x:60,y:70},{x:30,y:70},{x:40,y:70},{x:50,y:70},{x:60,y:70},{x:70,y:70},{x:80,y:70},{x:20,y:80},{x:30,y:80},{x:40,y:80},{x:50,y:80},{x:60,y:80},{x:70,y:80},{x:90,y:90},{x:90,y:100},{x:20,y:100},{x:30,y:90},{x:30,y:200},{x:40,y:190},{x:50,y:290},{x:60,y:190},{x:70,y:190},{x:80,y:190},{x:90,y:190},{x:10,y:120},{x:10,y:120},{x:10,y:120},{x:110,y:20},{x:10,y:20},{x:10,y:20},{x:120,y:120},{x:104,y:120},{x:109,y:210},{x:110,y:120},{x:210,y:120},{x:410,y:120},{x:510,y:220},{x:170,y:420}]
				pointList.forEach(item => {
					this.list.push({
						type: 'rectangle',
						x: item.x,
						y: item.y,
						width: 10,
						height: 10
					})
				})
				if(this.onInclick.x > 0) {
					this.list.push({
						type: 'circular',
						x: this.onInclick.x*2,
						y: this.onInclick.y*2,
						width: 10,
						height: 10
					})
				}
				// 生成图片
                this.$nextTick(() => {
                    // 要放在$nextTick()里，不然会空白
                    this.$refs.poster.create();
                })
            }
        }
    }
</script>